<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">报警管理</text>
				<view style="margin-left: 10upx;" @click="showDrawer">
					<uni-icons type="search" size="16" color="#156DAC"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<view class="content padding">
			<view class="page-content-list">
				<block v-for="(value, index) in listData" :key="index">
					<view class="content-list-cell">
						<view class="order-item">
							<view class="order-item-header">
								<uni-icons
									v-if="value.processingStatus !== 'e003_01'&& value.processingStatus !==  'e003_02'"
									class="icon" type="checkbox-filled" size="18" color="#2AD51D"></uni-icons>
								<uni-icons v-else class="icon" type="info-filled" size="18" color="#E72B2B"></uni-icons>
								<text
									v-if="value.processingStatus !== 'e003_01'&& value.processingStatus !==  'e003_02'"
									class="green">{{value.processingStatusVal || '- -'}}</text>
								<text v-else class="red">{{value.processingStatusVal || '- -'}}</text>
							</view>
							<view class="order-item-content">
								<view class="order-content-row">
									<view class="label">排口名称</view>
									<view class="value" style="color: #299AEB;">
										{{value.alarmInformationObj && value.alarmInformationObj.outletName}}
									</view>
								</view>
								<view class="order-content-row">
									<!-- style="color: #E72B2B;" -->
									<view class="label">报警类型</view>
									<view class="value">
										{{value.alarmInformationObj && value.alarmInformationObj.alarmType}}
									</view>
								</view>
								<view class="order-content-row">
									<view class="label">报警信息</view>
									<view class="value text-left">{{value.alarmInformation}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">报警开始时间</view>
									<view class="value">{{value.alarmStartTime}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">报警结束时间</view>
									<view class="value">{{value.alarmEndTime || '- -'}}</view>
								</view>
								<!-- <view class="order-content-row">
									<view class="label">处理人</view><view class="value">{{value.createdBy || '- -'}}</view>
								</view> -->
								<view class="order-content-row" v-if="value.processingResults">
									<view class="label">处理内容</view>
									<view class="value">{{value.processingResults}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">操作</view>
									<view class="value">
										<template v-if="userRole == '1'">
											<button v-if="value.processingStatus == 'e003_03'" class="order-btn"
												style="width: auto;padding: 0 8upx;"
												@click="goReElection(value)">重新分发</button>
										</template>
										<template v-if="userRole == '1'||userRole == '2'||userRole == '4'">
											<!-- 运维 -->
											<button v-if="value.processingStatus == 'e003_01'" class="order-btn"
												@click="handleSure(value)">确认</button>
											<button v-else-if="value.processingStatus == 'e003_02'" class="order-btn"
												@click="goDetail(value,'handle')">处理</button>
										</template>
										<template v-if="userRole == '3'">
											<!-- 客户 -->
											<button v-if="value.processingStatus == 'e003_04'" class="order-btn"
												@click="goDetail(value,'apply')">评价</button>
										</template>
										<!-- 状态 -->
										<button class="order-btn" @click="goDetail(value,'detail')">详情</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		</view>

		<uniDrawer ref="draw" :mask="true" mode='right' :width="250">
			<view :style="{height:needAdapt?'40rpx':'90rpx'}">&nbsp;</view>
			<!-- <view style="height:40upx">&nbsp;</view> -->
			<view :style="{height:needAdapt?'calc(100vh - 40rpx)':'calc(100vh - 90rpx)'}" class="draw-panel">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height:needAdapt?'calc(100% - 160rpx)':'100%'}">
				<!-- <scroll-view scroll-y="true" class="scroll-Y" style="height:100%"> -->
					<view class="operation-panel scrollStyle">
						<view class="item-card">
							<view class="card-title">
								<uni-icons class="icon left" type="paperclip" size="20" color="#156dac"></uni-icons>
								<text class="content">显示类型</text>
								<uni-icons class="icon right" type="arrowdown" size="16" color="#666"></uni-icons>
							</view>
							<view class="operation-panel flex" style="padding: 20upx 0 0  0;">
								<view class="item-btn mini auto" :class="dataFlag === 1?'':'white'"
									@click="changeDataFlag(1)">
									<text>当前报警</text>
								</view>
								<view class="item-btn mini auto" :class="dataFlag === 2?'':'white'"
									@click="changeDataFlag(2)">
									<text>历史报警</text>
								</view>
							</view>
						</view>
						<view class="drawer-form">
							<view class="drawer-form-item">
								<view class="drawer-label"><text>排口</text></view>
								<view class="drawer-content">
									<text v-if="query.outletName" style="padding-right: 30px;"
										@click="showPkPicker">{{query.outletName}}</text>
									<text v-else style="color: grey;" @click="showPkPicker">请选择排口</text>
									<tki-tree class="ipt-ctl" ref="tkitree" :range="range" :rangeKey="rangeKey"
										confirmColor="#4e8af7" @confirm="pkConfirm" />
								</view>
							</view>
							<view class="drawer-form-item">
								<view class="drawer-label"><text>时长大于</text></view>
								<view class="drawer-content">
									<uni-easyinput class="ipt-ctl" type="number" v-model="query.duration" maxlength="8"
										placeholder="请输入报警时长" />
								</view>
								<view class="drawer-label"><text>小时</text></view>
							</view>
							<view class="drawer-form-item">
								<view class="drawer-label"><text>开始时间</text></view>
								<view class="drawer-content">
									<TimeSelector ref="stime" class="ipt-ctl" showType="dateToTime"
										@btnConfirm="(e)=>dateChange(e,'alarmStartTime')">
										<text v-if="query.alarmStartTime">{{query.alarmStartTime}}</text>
										<text v-else style="color: grey;">请选择开始时间</text>
									</TimeSelector>
								</view>
							</view>
							<view class="drawer-form-item">
								<view class="drawer-label"><text>结束时间</text></view>
								<view class="drawer-content">
									<TimeSelector ref="etime" class="ipt-ctl" showType="dateToTime"
										@btnConfirm="(e)=>dateChange(e,'alarmEndTime')">
										<text v-if="query.alarmEndTime">{{query.alarmEndTime}}</text>
										<text v-else style="color: grey;">请选择结束时间</text>
									</TimeSelector>
								</view>
							</view>
						</view>

						<view class="item-card">
							<view class="card-title">
								<uni-icons class="icon left" type="bars" size="20" color="#156dac"></uni-icons>
								<text class="content">报警类型</text>
								<uni-icons class="icon right" type="arrowdown" size="16" color="#666"></uni-icons>
							</view>
							<view class="operation-panel flex start" style="padding: 20upx 0 0  0;">
								<view v-for="(item,index) in alarmTypes" class="item-btn mini auto mr-20"
									:class="query.alarmType === (item.code)?'':'white'"
									@click="changeDictQuery('alarmType',item)" :key="index">
									<text>{{item.codeName}}</text>
								</view>
							</view>
							<!-- <view class="card-content">
							<view class="choose-block active">全部</view>
							<view class="choose-block">离线</view>
							<view class="choose-block">数据超标</view>
							<view class="choose-block">故障</view>
							<view class="choose-block">恒值</view>
							<view class="empty"/>
							<view class="empty"/>
							<view class="empty"/> 
						</view>-->
						</view>

						<view class="item-card">
							<view class="card-title">
								<uni-icons class="icon left" type="paperclip" size="20" color="#156dac"></uni-icons>
								<text class="content">是否解除</text>
								<uni-icons class="icon right" type="arrowdown" size="16" color="#666"></uni-icons>
							</view>
							<view class="operation-panel flex" style="padding: 20upx 0 0  0;">
								<view v-for="(item,index) in removes" class="item-btn mini auto"
									:class="query.remove === (item.code)?'':'white'"
									@click="changeDictQuery('remove',item)" :key="index">
									<text>{{item.codeName}}</text>
								</view>
							</view>
						</view>
						<view class="item-card">
							<view class="card-title">
								<uni-icons class="icon left" type="flag" size="20" color="#156dac"></uni-icons>
								<text class="content">处理状态</text>
								<uni-icons class="icon right" type="arrowdown" size="16" color="#666"></uni-icons>
							</view>
							<view class="operation-panel flex" style="padding: 20upx 0 0  0;">
								<view v-for="(item,index) in processingStatuss" class="item-btn mini auto"
									:class="query.processingStatus === (item.code)?'':'white'"
									@click="changeDictQuery('processingStatus',item)" :key="index">
									<text>{{item.codeName}}</text>
								</view>
							</view>
						</view>

						<view class="item-card">
							<view class="card-title">
								<uni-icons class="icon left" type="gear" size="20" color="#156dac"></uni-icons>
								<text class="content">是否需要处理</text>
								<uni-icons class="icon right" type="arrowdown" size="16" color="#666"></uni-icons>
							</view>
							<view class="operation-panel flex" style="padding: 20upx 0 0  0;">
								<view v-for="(item,index) in processs" class="item-btn mini auto"
									:class="query.process === (item.code)?'':'white'"
									@click="changeDictQuery('process',item)" :key="index">
									<text>{{item.codeName}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="bottom-panel">
					<!-- <view class="item-btn green lp"><text>重置</text></view> -->
					<view class="item-btn lp" @click="handleQuery"><text>确定</text></view>
				</view>
			</view>
		</uniDrawer>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import LbPicker from '@/components/lb-picker'
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	import {
		getDict
	} from '@/common/dict.js'
	import {
		parseTime,
		getRolePermiss
	} from '@/common/util.js'

	const listQuery = '/business/alarm/getAllAlarm'
	const listQueryHistroy = '/business/historyAlarm/getAllAlarm'
	const sureById = '/business/alarm/updateById'

	const getTree = '/base/outlet/listTree'
	export default {
		components: {
			uniIcons,
			TimeSelector,
			uniLoadMore,
			uniDrawer,
			tkiTree,
			LbPicker
		},
		data() {
			return {
				reload: false,
				userRole: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				listData: [],
				range: [],
				rangeKey: 'name',
				last_id: '',
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				dept: '',
				companyName: '',
				query: {
					total: 0,
					page: 1,
					limit: 10,
					outletId: '',
					outletName: '',
					alarmType: '',
					remove: '',
					process: '',
					processingStatus: '',
					alarmStartTime: null,
					alarmEndTime: null
				},
				pickerDictProps: {
					label: 'codeName',
					value: 'code',
				},
				// 字典
				alarmTypes: [],
				removes: [],
				processingStatuss: [],
				processs: [],
				dataFlag: 1,
				needAdapt: false, //判断是否是iphonex以下的手机型号，true：x以下，false：x以上
				pageTotal:null
			}
		},
		onLoad() {
			const app = getApp()
			let needAdapt = app.globalData.needAdapt;
			this.needAdapt = needAdapt
			const role = uni.getStorageSync('USER_ROLE') // e036_01 运维
			this.userRole = getRolePermiss(role)
			// 字典
			this.alarmTypes = [{
				code: '',
				codeName: '全部'
			}, ...getDict('e001')]
			this.removes = [{
				code: '',
				codeName: '全部'
			}, ...getDict('e002')]
			this.processingStatuss = [{
				code: '',
				codeName: '全部'
			}, ...getDict('e003')]
			this.processs = [{
				code: '',
				codeName: '全部'
			}, ...getDict('e004')]
			// 默认
			var beforeTime = new Date().getTime() - 1000 * 60 * 60 * 24 * 3;
			var before = parseTime(new Date(beforeTime), '{y}-{m}-{d}');
			const time = parseTime(new Date(), '{y}-{m}-{d}')
			this.query.alarmStartTime = before + ' ' + '00:00:00'
			this.query.alarmEndTime = time + ' ' + '23:59:59'
			this.getList();
			this.getTreeData();
		},
		onShow() {
			this.getList();
		},
		onPullDownRefresh() {
			this.last_id = '';
			this.listData = []
			this.query.page = 1
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 100)
		},
		onReachBottom() {
			this.status = 'more';
			// this.query.page = this.query.page + 1
			if(this.query.page<this.pageTotal){
				this.query.page = this.query.page + 1
				this.getList(true);
			}else{
				this.status = '';
			}
		},
		methods: {
			pageback() {
				uni.navigateBack({
					delta: 1
				});
			},

			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			handleQuery() {
				this.query.page = 1
				this.getList();
				this.$refs.draw.close()
			},
			dateChange(res, type) {
				this.query[type] = res.key
			},
			showDrawer() {
				this.$refs.draw.open()
			},
			showPkPicker() {
				this.$refs.tkitree._show()
			},
			pkConfirm(e) {
				if (e.length > 0) {
					const {
						id,
						name
					} = e[0]
					this.query.outletId = id
					this.query.outletName = name
				}
			},
			changeDictQuery(key, item) {
				const {
					code
				} = item
				this.query[key] = code
			},
			getTreeData() {
				this.$api.request(getTree, {
					method: 'get',
				}).then(res => {
					if (res.success) {
						// 过滤无排口数据
						const result = []
						res.data.list.map(item => {
							if (item.children && item.children.length > 0) {
								result.push(item)
							}
						})
						this.range = result
					}
				}).catch(() => {})
			},
			goDetail(item, type) {
				const {
					id
				} = item
				let c_url = `/pages/form/businessDetail/businessDetail`
				if (this.dataFlag === 2) {
					c_url = `/pages/form/historyAlarmDetail/historyAlarmDetail`
				}
				uni.navigateTo({
					url: c_url + `?type=${type}&id=${id}`,
				})
			},
			goReElection(item) {
				const {
					id,
					responsiblePersonId,
					currentAlarmPersonnelId
				} = item
				uni.navigateTo({
					url: `/pages/police/components/reElection?responsiblePersonId=${responsiblePersonId || ''}&currentAlarmPersonnelId=${currentAlarmPersonnelId || ''}&id=${id}`,
				})
			},
			getList(loadMore = false) {
				this.status = 'loading';
				let c_url = listQuery
				if (this.dataFlag === 2) {
					c_url = listQueryHistroy
				}
				this.$api.request(c_url, {
					method: 'get',
					data: this.query
				}).then(res => {
					if (res.success) {
						const data = res.data
						const {
							total,
							rows
						} = data;
						this.pageTotal = Math.ceil(total/this.query.limit);
						console.log(this.pageTotal)
						if (rows.length === 0 || total <= this.query.limit) {
							this.status = ''
						}
						if (loadMore) {
							this.listData = [...this.listData, ...rows]
						} else {
							this.listData = rows
						}
						this.last_id = this.listData[this.listData.length - 1];
						this.reload = false;
					}
				}).catch(() => {})
			},
			changeDataFlag(f) {
				this.dataFlag = f
			},
			handleSure(item) {
				uni.showModal({
					title: '提示',
					content: '是否标记已确认？',
					success: (e) => {
						if (e.confirm) {
							const {
								id
							} = item
							uni.showLoading({
								title: '确认中',
								mask: true
							})
							this.$api.request(sureById, {
								method: 'post',
								data: {
									id: id,
									processingStatus: 'e003_02',
								}
							}).then(res => {
								uni.hideLoading()
								if (res.success) {
									this.$api.toastMsg('已确认', 'success')
									// this.getList()
									if(this.query.page<this.pageTotal){
										this.getList()
									}
									// setTimeout(()=> {
									// 	this.pageback()
									// }, 1000);
								} else {
									this.$api.toastMsg(res.message)
								}
							}).catch(() => {
								uni.hideLoading()
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-content-list {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;

		.content-list-cell {
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.scrollStyle {
		height: 40em;
	}

	.order-item {
		width: 750upx;
		background: #fff;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;

		.order-item-content {
			margin-top: 30upx;

			.order-content-row {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				font-size: 26upx;
				margin-bottom: 30upx;

				.order-btn {
					display: inline-block;
					background-color: #156dac;
					color: #fff;
					width: 95upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 24upx;
					padding: 0;
					margin-left: 10upx;
				}

				.label {
					flex: 0 0 200upx;
					color: #5A5A5A;
					text-align: left;
					font-size: 26upx;
				}

				.value {
					flex: 1;
					color: #000;
					text-align: right;
					font-size: 26upx;

					&.text-left {
						text-align: left;
						padding-left: 20upx;
					}
				}
			}

		}

		.order-item-header {
			display: flex;
			align-items: center;

			.icon {
				margin-right: 10upx;
			}

			text {
				color: #333;
				font-size: 26upx;

				&.green {
					color: #2AD51D;
				}

				&.red {
					color: #E72B2B
				}
			}

		}
	}

	.draw-panel .operation-panel {
		overflow: inherit;
	}
</style>
